<!-- 横向柱状图 -->
<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

// 接收外部传入的数据
const props = defineProps({
  departments: {
    type: Array,
    required: true,
    default: () => ["处室一", "处室二", "处室三", "处室四", "处室五", "处室六"],
  },
  taskCounts: {
    type: Array,
    required: true,
    default: () => [6000, 5000, 4000, 3000, 2000, 1000],
  },
});

const chartContainer = ref(null);
let chartInstance = null;
const zoomData = [
  // {
  //   show: true,
  //   type: "slider",
  //   backgroundColor: "rgb(19, 63, 100)",
  //   fillerColor: "rgb(16, 171, 198)",
  //   borderColor: "rgb(19, 63, 100)",
  //   showDetail: false,
  //   startValue: 0,
  //   endValue: 5,
  //   yAxisIndex: [0, 1],
  //   filterMode: "empty",
  //   width: 8,
  //   height: "80%",
  //   right: 3,
  //   handleSize: 0,
  //   zoomLoxk: true,
  //   top: "middle",
  // },
  // {
  //   type: "inside",
  //   xAxisIndex: [0, 1],
  //   zoomOnMouseWheel: false,
  //   moveOnMouseMove: true,
  //   moveOnMouseWheel: true,
  // },

  {
    type: "slider",
    realtime: true,
    start: 0,
    end: 40, // 初始展示40%
    height: 4,
    fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
    borderColor: "rgba(17, 100, 210, 0.12)",
    handleSize: 0, // 两边手柄尺寸
    showDetail: false, // 拖拽时是否展示滚动条两侧的文字
    top: "97%",

    // zoomLock:true, // 是否只平移不缩放
    // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
    // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
  },
  {
    type: "inside", // 支持内部鼠标滚动平移
    start: 0,
    end: 40,
    zoomOnMouseWheel: false, // 关闭滚轮缩放
    moveOnMouseWheel: true, // 开启滚轮平移
    moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
  },
];
const initChart = () => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    const option = {
      backgroundColor: "transparent",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: [""],
        textStyle: {
          color: "#fff",
          top: 0,
          left: 0,
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        // axisTick: {
        //   show: false,
        // },
        // axisLabel: {
        //   color: "#fff",
        // },
        // splitLine: {
        //   lineStyle: {
        //     color: "#333",
        //   },
        // },
        name: "单位:万次",
        type: "category",
        data: props.departments,
        nameTextStyle: {
          color: "#fff",
        },
        axisLabel: {
          textStyle: {
            color: "#fff", //字体颜色
          },
        },
        axisLine: {
          show: false,
          textStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        name: "单位:万次",
        // type: "category",
        // data: props.departments,
        nameTextStyle: {
          color: "#fff",
        },
        // axisLabel: {
        //   textStyle: {
        //     color: '#fff',//字体颜色
        //   }
        // },
        // axisLine: {
        //   show: false,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        // axisTick: {
        //   show: false,
        // },
        // splitLine: {
        //   show: false,
        // },

        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          lineStyle: {
            color: "#333",
          },
        },
      },
      series: [
        {
          name: "任务数",
          type: "bar",
          barWidth: "30%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#1EE7E7" },
              { offset: 1, color: "#1890FF" },
            ]),
            borderRadius: 10,
          },
          data: props.taskCounts,
        },
      ],
      dataZoom: zoomData,
    };
    chartInstance.setOption(option);
  }
};

onMounted(() => {
  console.log(props.taskCounts, "-------------------------------------");

  initChart();
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped>
/* 可添加一些额外样式 */
</style>
